<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <title>聚财通</title>
    <link rel="stylesheet" href="../../styles/h5/reset.min.css"/>
    <link rel="stylesheet" href="../../styles/h5/errortankuang.css"/>
    <!--以上为公共css样式-->
    <link rel="stylesheet" href="../../styles/h5/fund.css"/>

    <script type="text/javascript" src='../../scripts/h5/zepto1.0.min.js'></script>
    <script charset="utf-8" type="text/javascript" src="../../scripts/h5/echarts.min(jj).js"></script>
    <script charset="utf-8" type="text/javascript" src="../../scripts/h5/zepto.modal.js"></script>
    <!--以上为公共js文件-->
</head>
<body>

<div class="zz-queryHeader-jj clear">
    <p class="zz-product-name-jj" id="zz-product-name-jj"></p>
    <div class="zz-jjcode-jj">(基金代码<span class="zz-daima-jj" id="zz-daima-jj"></span>)</div>
    <div class="zz-queryMiddle-jj clear">
        <div class="zz-middleLeft-jj">
            <div class="clear">
                <span class="zz-sevenDay-jj">近七日年化</span><i class="zz-wenhao-jj zz-queryWenhao-jj" id="zz-queryWenhao-jj"></i>
            </div>
            <div class="zz-queryRate-jj clear" id="zz-queryRate-jj">--</div>
        </div>
        <div class="zz-middleRight-jj">
            <span class="zz-licaiTerm-jj">理财期限</span>
            <span class="zz-anyTime-jj">随时购买，支持T+0赎回到账</span>
        </div>
    </div>
    <div class="zz-queryBottom-jj">
        <ul class="zz-queryUl-jj">
            <li>
                <i class="zz-shandianIcon-jj"></i>
                低风险
            </li>
            <li>
                <span id="minSubscribAmount"></span>元起购
            </li>
            <li>
                累计成交<span class="zz-queryBottomMoney-jj" id="zz-queryBottomMoney-jj"></span><span id="zz-type-jj">元</span>
            </li>
        </ul>
    </div>
</div>

<div class="zz-profitHeader-jj clear margin-top16">
    <div class="zz-pHeader-jj zz-profitHeaderColor-jj" choiceProfit="annual7D">
        <span class="zz-border-jj zz-borderColor-jj"></span>
        七日年化
    </div>
    <div class="zz-pHeader-jj" choiceProfit="oppositeDate">
        <span class="zz-border-jj"></span>
        万份收益
    </div>
</div>

<div class="zz-choiceDay-jj">
    <table>
        <tr>
            <td class="zz-day-jj zz-choiceDayColor-jj" dateSlot="1">近七天</td>
            <td class="zz-day-jj" dateSlot="2">近1月</td>
            <td class="zz-day-jj" dateSlot="3">近3月</td>
        </tr>
    </table>
</div>

<div class="zz-EChartsList-jj">
    <div class="zz-myChart-jj" id="myChart"></div>
    <div class="zz-dayList-jj">
        <span class="zz-dayStart-jj"></span>
        <span class="zz-dayEnd-jj" style="
    padding-right: .3rem;"></span>
    </div>
</div>

<div class="zz-tradeRule-jj margin-top16">
    <p class="zz-tradeRuleP-jj">交易规则</p>
    <ul class="zz-tradeRuleUl-jj">
        <li>
            <span class="zz-tradeRuleLeft-jj">买入</span>
            <span class="zz-tradeRuleRight-jj">随时可买</span>
        </li>
        <li class="zz-shouyi-jj">
            <span class="zz-tradeRuleLeft-jj">收益</span>
            <span class="zz-tradeRuleRight-jj">现在买入，<span id="revenueTime"></span>产生收益，<span id="toAccountTime"></span>首笔收益到账</span>
        </li>
        <li>
            <span class="zz-tradeRuleLeft-jj">快速取出</span>
            <span class="zz-tradeRuleRight-jj">T+0当天到账，每日最多100万元</span>
        </li>
        <li>
            <span class="zz-tradeRuleLeft-jj">普通取出</span>
            <span class="zz-tradeRuleRight-jj">随时可取，不限额度，T+1日到账</span>
        </li>
    </ul>
    <a class="zz-readRule-jj" href="../../html/h5/fundRule.html">查看规则详情</a>
</div>

<div class="zz-tradeRule-jj margin-top16">
    <p class="zz-tradeRuleP-jj">风险提示</p>
    <span class="zz-riskContent-jj zz-mt-jj">货币基金主要投资于银行定期存款和国债等信用级别极高的短期债券，这些投资安全性高，流动性强，收益稳健，出现亏损的可能性较小。</span>
    <span class="zz-riskContent-jj">但在一些情况下也可能会出现亏损风险，例如：投资的债券发生违约，不能偿付，可能产生亏损；多数用户同时赎回时，基金短期内需要大量现金兑付，集中抛售债券，可能产生亏损。</span>
</div>

<div class="zz-tradeRule-jj margin-top16">
    <p class="zz-tradeRuleP-jj">常见问题</p>
    <div class="zz-problemList-jj">
        <div class="zz-zz-problemL-jj">
            <span class="zz-wenhao2-jj"></span
            ><span class="zz-zz-problemP-jj">什么是万份收益？</span>
        </div>
        <div class="zz-problemContent-jj">万份收益是对货币基金收益的一个指标，简单理解为假设你买了1万元，此产品当日的万份收益是1.08，则你当天的收益1.08元。</div>
    </div>
    <div class="zz-problemList-jj">
        <div class="zz-zz-problemL-jj">
            <span class="zz-wenhao2-jj"></span
            ><span class="zz-zz-problemP-jj">为什么买入后没有收益？</span>
        </div>
        <div class="zz-problemContent-jj">
            买入后T+1开始产生收益，次日15:00前可查看昨日收益，详情请见交易规则。
        </div>
    </div>
    <div class="zz-problemList-jj">
        <div class="zz-zz-problemL-jj">
            <span class="zz-wenhao2-jj"></span
            ><span class="zz-zz-problemP-jj">为什么取出还没有到账？</span>
        </div>
        <div class="zz-problemContent-jj">货币基金快速取出支持当天到账。普通取出需T+1日到账，收益截止到账前一天，若遇周末、节假日将延迟到账。</div>
    </div>
    <div class="zz-problemList-jj">
        <div class="zz-zz-problemL-jj">
            <span class="zz-wenhao2-jj"></span
            ><span class="zz-zz-problemP-jj">为什么当天买入无法快速取出？</span>
        </div>
        <div class="zz-problemContent-jj">货币基金需要基金公司确认份额后才可以支持取出，请等待已买入的份额状态变为可用份额后就可以发起取出了。</div>
    </div>
    <div class="zz-problemList-jj">
        <div class="zz-zz-problemL-jj">
            <span class="zz-wenhao2-jj"></span
            ><span class="zz-zz-problemP-jj">为什么买入后资产总额没有实时增加？</span>
        </div>
        <div class="zz-problemContent-jj">基金份额增加需要待基金公司确认后才可以增加份额。期间可通过订单查询查询到申购订单对应的基金资产份额数据。</div>
    </div>
</div>

<div class="zz-footerIcon-jj">
    <span class="zz-umfIcon-jj"></span>
</div>

<div class="zz-openSettlement-jj">
    <span class="zz-jisuanqiIcon-jj"></span>
    <a class="zz-openzidong-jj" href="javascript:;">开通结算款自动转入</a>
</div>

<div class="zz-calculator-jj" style="display: none">
    <p class="zz-profitCalculator-jj">
        <i class="zz-closeIcon-jj"></i>
        收益计算器
    </p>
    <div class="zz-moneyInput-jj clear">
        <span class="fl zz-buyMoney-jj">
            买入金额
        </span>
        <span class="fr zz-moneyfuhao-jj">
            ￥<span class="zz-inputMoney-jj"></span>
        </span>
    </div>
    <div class="zz-patProfit-jj clear">
        <span class="fl">过去2个月收益</span>
        <span class="fr zz-redMoneyfuhao">￥<span class="zz-profitMoney-jj"></span></span>
    </div>
    <ul class="zz-calculatorNum-jj clear" id="zz-calculatorNum-jj">
        <li class="clear">
            <span>7</span>
            <span>8</span>
            <span>9</span>
        </li>
        <li class="clear">
            <span>4</span>
            <span>5</span>
            <span>6</span>
        </li>
        <li class="clear">
            <span>1</span>
            <span>2</span>
            <span>3</span>
        </li>
        <li class="clear">
            <span class="zz-zero-jj">0</span>
            <span class="zz-calculatorDeleteIcon-jj"></span>
        </li>
    </ul>
    <div class="zz-jieshao-jj">
        <p>根据<span class="zz-calculatorDateStart"></span>~<span class="zz-calculatorDateEnd"></span>历史数据计算，不代表未来收益</p>
        <p>近一年年化<span class="zz-jieshao-profit"></span>*数据来源于公开市场</p>
    </div>
    <a class="zz-calculatorOpen-jj" href="javascript:;">开通结算款自动转入</a>
</div>

<div class="footer100"></div>

<div class="mask"></div>
</body>
<script type="text/javascript" src='../../scripts/h5/fastClick.js'></script>
<script charset="utf-8" type="text/javascript" src="../../scripts/h5/utils.js"></script>
<script charset="utf-8" type="text/javascript" src="../../scripts/h5/public.js"></script>
<script charset="utf-8" type="text/javascript">
    utils.countRem();
    FastClick.attach(document.body);
    $(window).resize(function () {
        utils.countRem();
        FastClick.attach(document.body);
        eChart();
    });
    
    var $day = $(".zz-day-jj");
    var $pHeader = $(".zz-pHeader-jj");
    var $calculator = $(".zz-calculator-jj");
    var $mask = $(".mask");
    var $htmlBody = $('html,body');
    var $inputMoney = $(".zz-inputMoney-jj");
    var $profitMoney = $(".zz-profitMoney-jj");
    var rate = "";
    var symbol = "%";
    var dateSlot = $(".zz-choiceDayColor-jj").attr("dateSlot");
    var data = "";
    var dataX = [];
    var dataY = [];
    var annual7D =[];
    var unitAccrua =[];
    var maxSyl = "";
    var minSyl = "";
    var maxDwjz = "";
    var cumulativeSum = "";
	
    //初始化页面数据
    $.ajax({
        url: utils.ajaxUrl()+"h5/fundQuery/commonQuery",
        async: false,
        type: 'get',
        success: function (res) {
            //var res = JSON.parse(res);
            console.log(res);
            if (res && res.retCode == '0000') {
                $("#zz-product-name-jj").html(res.fullName);
                $("#zz-daima-jj").html(res.fcode);
                if(res.syl != null && res.syl>0){
                	$("#zz-queryRate-jj").html(res.syl+"%");
                }
                
                cumulativeSum = res.cumulativeSum;
                
                $("#minSubscribAmount").html(res.minSubscribAmount);
                if (parseFloat(utils.removeSpace(cumulativeSum, ",")) < 100000000) {
                    $("#zz-queryBottomMoney-jj").html(cumulativeSum);
                } else {
                    $("#zz-queryBottomMoney-jj").html(res.strokeCount);
                    $("#zz-type-jj").html("笔");
                }
                var dateStart = res.revenueTime.split("-");
                var dateEnd = res.toAccountTime.split("-");
                var revenueTime = dateStart[1] + "月" + dateStart[2] + "日";
                var toAccountTime = dateEnd[1] + "月" + dateEnd[2] + "日";
                $("#revenueTime").html(revenueTime);
                $("#toAccountTime").html(toAccountTime);

            } else {
                utils.error("sx.png","啊哦，数据异常");
            }
        },
        error: function () {
            utils.error("wlyc.png","啊哦，连接不到网络呢");
        }
    });

    //初始化计算机数据
    $.ajax({
        url: utils.ajaxUrl()+"h5/fundQuery/calculatorQuery",
        async: false,
        type: 'get',
        success: function (res) {
            //var res = JSON.parse(res);
            console.log(res);
            if (res && res.retCode == '0000') {
                $(".zz-calculatorDateStart").html(utils.interceptDate(res.startDate,"-","month","/"));
                $(".zz-calculatorDateEnd").html(utils.interceptDate(res.endDate,"-","month","/"));
                $(".zz-jieshao-profit").html(res.aveSyl+"%");
                rate = parseFloat(res.aveDwjz);
                $inputMoney.html(utils.comma(res.defaultMoney));
                //profit = utils.calculation(utils.calculation(sum, 10000, "/"), rate, "*");//因为浮点数有bug 所以解决一下
                //$profitMoney.html(utils.comma(utils.calculation(res.defaultMoney, res.aveDwjz, "*")));
                $profitMoney.html(utils.comma(utils.calculation(utils.calculation(rate, 10000, "/"), parseFloat(res.defaultMoney)*60, "*").toFixed(4)));

            } else {
                utils.error("sx.png","啊哦，数据异常");
            }
        },
        error: function () {
            utils.error("wlyc.png","啊哦，连接不到网络呢");
        }
    });
    //初始化图表数据.
    bindChart();
    function bindChart(){
        $.ajax({
            url: utils.ajaxUrl()+"h5/fundQuery/chartQuery",
            data: {
                dateSlot: dateSlot
            },
            async: false,
            type: 'get',
            success: function (res) {
                //var res = JSON.parse(res);
                console.log(res);
                
                if (res && res.retCode == '0000') {
                    data = res.fundRateList;
                    dataX = [];
                    dataY = [];
        			annual7D = [];
        			unitAccrua = [];
                    if(data && data.length>0){
                    	$(".zz-dayStart-jj").html(res.startDate.slice(5, 10));
                		$(".zz-dayEnd-jj").html(res.endDate.slice(5, 10));
                		
                		maxDwjz = parseFloat(utils.calculation(parseFloat(res.maxDwjz),"0.02","+")).toFixed(2);//最大万份 y轴最大值
                    	/* maxDwjz = res.maxDwjz;//最大万份
	                    maxDwjz = maxDwjz.slice(0,1)+maxDwjz.slice(1,3);
	                    maxDwjz = utils.calculation(parseFloat(maxDwjz),"0.1","+"); */
	                    
	                    minDwjz = parseFloat(utils.calculation(parseFloat(res.minDwjz),"0.02","-")).toFixed(2) //最小万份 y轴最小值
	                    /* minDwjz = res.minDwjz;//最小万份
	                    minDwjz = minDwjz.slice(0,1)+minDwjz.slice(1,3);
	                    minDwjz = utils.calculation(parseFloat(minDwjz),"0.1","-"); */
	                    
	                    maxSyl = parseFloat(utils.calculation(parseFloat(res.maxSyl),0.02,"+")).toFixed(2);//最大七日 y轴最大值
	                    /* maxSyl = utils.calculation(parseFloat(res.maxSyl),0.2,"+").toString();//最大七日
	                    maxSyl = maxSyl.slice(0,1)+maxSyl.slice(1,3);
	                    var arr = maxSyl.toString().split(".");
	                    if(arr[1]%2 !=0){
	                        maxSyl = utils.calculation(parseFloat(maxSyl),"0.1","+");
	                    } */
	                    
	                    minSyl = parseFloat(utils.calculation(parseFloat(res.minSyl),0.02,"-")).toFixed(2);//最小七日 y轴最小值
	                    /* minSyl = utils.calculation(parseFloat(res.minSyl),0.2,"-").toString();//最小七日
	                    minSyl = minSyl.slice(0,1)+minSyl.slice(1,3);
	                    var arr2 = minSyl.toString().split(".");
	                    if(arr2[1]%2 !=0){
	                        minSyl = utils.calculation(parseFloat(minSyl),"0.1","+");
	                    } */
	                    
	                    bindEchartData();
	                    eChart();
	                } else {
						$(".zz-dayStart-jj").html("");
		                $(".zz-dayEnd-jj").html("");
		                dataX = "";
		                dataY = "";
        				annual7D = "";
        				unitAccrua = "";
		                eChart();
					}    
                } else {
                    utils.error("sx.png","啊哦，数据异常");
                }
            },
            error: function () {
                utils.error("wlyc.png","啊哦，连接不到网络呢");
            }
        });
    }
    //绑定图表数据
    function bindEchartData(){
        dataX = [];
        dataY = [];
        annual7D = [];
        unitAccrua = [];
        for (var i=0;i<data.length;i++){
            var curData = data[i];
            dataX.push(curData.oppositeDate);
            if($(".zz-profitHeaderColor-jj").attr("choiceProfit")=="annual7D"){
                annual7D.push(curData.annual7D);
                dataY = annual7D;
            }else{
                unitAccrua.push(curData.unitAccrua);
                dataY = unitAccrua;
            }
        }
    }

    //点击问号
    $("#zz-queryWenhao-jj").click(function () {
        $htmlBody.addClass('ovfHiden');
        new $.modal({
            title: '近七日年化收益率',//弹框title
            content: '最近七日的平均收益水平，进行年化以后得出的数据，根据基金公司的业绩每日更新。',//弹框内容
//            serviceCharge:"服务费￥100元，到账金额3433元",
            confirm: "我知道了",//确认按钮里面内容
            isshowclosebtn: false,//是否显示取消按钮
            showcontent: false,//false为弹出框组件二，true为弹出框组件一
            closecallback: function () {
            },//点击关闭时触发事件
            surecallback: function () {
                //点击确定时触发事件
                $htmlBody.removeClass('ovfHiden');
            }
        }).show();
    });

    //时间切换
    $day.click(function () {
        var $this = $(this);
        if ($this.hasClass("zz-choiceDayColor-jj")) {
            return false;
        }
        $this.addClass("zz-choiceDayColor-jj").siblings().removeClass("zz-choiceDayColor-jj");

        dateSlot = $(".zz-choiceDayColor-jj").attr("dateSlot");
        bindChart();

        eChart();
    });

    //头部切换
    $pHeader.click(function () {
        var $this = $(this);
        if ($this.hasClass("zz-profitHeaderColor-jj")) {
            return false;
        }
        $this.addClass("zz-profitHeaderColor-jj").siblings().removeClass("zz-profitHeaderColor-jj");
        $this.children(".zz-border-jj").addClass("zz-borderColor-jj");
        $this.siblings().children(".zz-border-jj").removeClass("zz-borderColor-jj");

        dateSlot = $(".zz-choiceDayColor-jj").attr("dateSlot");

        if($(".zz-profitHeaderColor-jj").attr("choiceProfit") == "annual7D"){
            symbol = "%";
        }else{
            symbol = "";
        }
        bindChart();
        eChart();
    });

    

    function eChart() {

        var myChart = echarts.init(document.getElementById('myChart'));
        var option = {
            backgroundColor: "#fff",
            tooltip: {
                show: true,
                trigger: 'axis',
                //axisPointer:{type:"none",},
                backgroundColor: "#508cee",
                borderWidth: "0",
                borderRadius: "0",
                formatter: function (params) {
                    return params[0].axisValue + '<br>' + params[0].data + symbol;
                },
                axisPointer: {
                    axis: "auto",
                    type: "line",
                    lineStyle: {
                        color: "#a7c5f7"
                    }
                },
                textStyle: {
                    color: "#fff",
                    fontSize: 14
                }
            },
            grid: {
                left: '15',
                right: '15',
                bottom: '12%',
                containLabel: true,
                //width:220,
                height: 160
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'ar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                show: false,
                type: 'category',
                boundaryGap: false,
                //min:"dataMin",
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#d5d5d5"
                    }

                },
                axisTick: {
                    show: false
                },
                data: dataX
            },
            yAxis: {
                type: 'value',
                min: minSyl,
                max: maxSyl,
                //interval:"1",
                //splitNumber: "4",
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: "#d5d5d5"
                    }
                },
                axisTick: {
                    show: false
                },
                z: 10,
                axisLabel: {
                    inside: true,
                    //formatter: "{value}" + symbol,
                    formatter: function (s){
                        var a = s.toString().split(".");
                        if (a[1]) {
                            if(a[1].length ==1){
                                a = a[0] + "." + a[1] + "0";
                            }else{
                                a = a[0] + "." + a[1];
                            }
                        } else {
                            a = a + ".00"
                        }
                        return a + symbol;
                    },
                    fontSize: 12
                },
                splitLine: {
                    lineStyle: {
                        color: "#f6f6f6"
                    }
                }
            },
            series: [
                {
                    name: '',
                    type: 'line',
                    data: dataY,
                    itemStyle: {
                        normal: {
                            color: "#508cee",
                            //borderWidth: "0",
                            lineStyle: {
                                color: "#508cee",
                                width: 1,
                                type: "solid"
                            },
                            areaStyle: {color: "#f3f8fe"},
                            label: {
                                //show:"false"
                            }
                        }
                    },
                    markLine: {
                        silent: true,
                        lineStyle: {
                            normal: {
                                color: "#333"
                            }
                        }
                    },
                    symbol: 'emptyCircle',
                    symbolSize: 6,
                    showSymbol: false,
                    hoverAnimation: false,
                    z: 10
                }
            ]
        };
        if($(".zz-profitHeaderColor-jj").attr("choiceProfit") == "annual7D"){
            //option.yAxis.min = "1";
            //option.yAxis.splitNumber = "4";
        }else{
            //option.yAxis.splitNumber = "4";
            option.yAxis.min = minDwjz;
            option.yAxis.max = maxDwjz;
            //delete option.yAxis.splitNumber;
        }
        // 为echarts对象加载数据
        myChart.setOption(option);
    }

    //点击计算机图标
    $(".zz-jisuanqiIcon-jj").click(function () {
        $calculator.show();
        $mask.css("display", "block");
        $htmlBody.addClass('ovfHiden');
        $(".zz-myChart-jj div").css("zIndex", 100);
    });

    //点击X图标
    $(".zz-closeIcon-jj").click(function () {
        $calculator.hide();
        $mask.hide();
        $htmlBody.removeClass('ovfHiden');
    });

    //点击遮罩层
    $mask.click(function () {
        $calculator.hide();
        $mask.hide();
        $htmlBody.removeClass('ovfHiden');
    });

    //点击数字
    $("#zz-calculatorNum-jj").on("tap", "span", function () {
        var $this = $(this);
        var profit = "";
        var num = utils.removeSpace($inputMoney.html(), ",");//先去掉逗号
        if ($this.hasClass("zz-calculatorDeleteIcon-jj")) {
            if (num.length == 0) {
                return
            }
            num = num.substr(0, num.length - 1);//依次去掉最后一项
            profit = utils.calculation(utils.calculation(rate, 10000, "/"), num*60, "*").toFixed(4);//因为浮点数有bug 所以解决一下

            if (profit == 0) {
                profit = "0.00";
            }

            $inputMoney.html(utils.comma(num));
            $profitMoney.html(utils.comma(profit));
            return;
        }

        var text = $this.text();
        var sum = num + text;
        sum = utils.removeSpace(sum, ",");
        if (sum == 0) {
            return false;
        }

        if (sum > 1000000) {//如果总数大于100万就让等于100万
            sum = "1000000";
        }
        profit = utils.calculation(utils.calculation(rate, 10000, "/"), sum*60, "*").toFixed(4);//因为浮点数有bug 所以解决一下

        $inputMoney.html((utils.comma(sum)));
        $profitMoney.html(utils.comma(profit));
    });

    $(".zz-openzidong-jj").click(function () {
        window.location.href = "../../html/h5/fundOpenBalance.html";
    });

    $(".zz-calculatorOpen-jj").click(function () {
        window.location.href = "../../html/h5/fundOpenBalance.html";
    })
</script>
</html>